<template>
  <div class="mod-config">
    <el-dialog v-drag width="90%" height="90%" modal-append-to-body append-to-body title="选择药品资料(双击选择)"
      :close-on-click-modal="false"
      :visible.sync="visible"
      >
      <el-form :inline="true" :model="dataForm" ref="dataFormRef" @keyup.enter.native="getDataList()">
        <el-form-item>
          单位：
          <el-select size="mini" v-model="dataForm.unit" clearable placeholder="请选择" @change="getDataList()"
            @clear="getDataList()">
            <el-option v-for="item in units" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          选择过滤：
          <el-select size="mini" v-model="dataForm.selectField" clearable placeholder="请选择" @change="getDataList()"
            @clear="getDataList()">
            <el-option v-for="item in selectFields" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select size="mini" v-model="dataForm.selectValue" clearable placeholder="请选择" @change="getDataList()"
            @clear="getDataList()">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- profit = localRetailPrice - tradePrice,
       profitRate = (localRetailPrice - tradePrice)/localRetailPrice * 100 -->
        <el-form-item>
          库存/价格/毛利过滤：
          <el-select size="mini" v-model="dataForm.priceField" clearable placeholder="请选择" @change="getDataList()"
            @clear="getDataList()">
            <el-option v-for="item in priceFields" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select size="mini" v-model="dataForm.priceFormula" clearable placeholder="请选择" @change="getDataList()"
            @clear="getDataList()">
            <el-option v-for="item in priceFormulas" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input size="mini" v-model="dataForm.priceValue" clearable type="number" placeholder="库存/价格/毛利"
            @blur="getDataList()" @clear="getDataList()"></el-input>
        </el-form-item>
        <el-form-item>
          查询过滤：
          <el-select size="mini" v-model="dataForm.queryField" clearable placeholder="请选择" @change="getDataList()"
            @clear="getDataList()">
            <el-option v-for="item in queryFields" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input size="mini" v-model="dataForm.key" placeholder="参数名" clearable @blur="getDataList()"
            @clear="getDataList()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()" size="mini" type="success">查询</el-button>
          <el-button @click="resetForm()" size="mini" type="info">重置</el-button>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="3">
          <el-input placeholder="输入关键字进行过滤" size="mini" v-model="filterText" clearable>
          </el-input>
          <el-tree class="filter-tree" ref="tree" node-key="id" :data="treeData" :props="defaultProps"
            :filter-node-method="filterNode" @node-click="handleNodeClick" :default-expand-all="false">
          </el-tree>
        </el-col>
        <el-col :span="21">
          <!-- 表格区 -->
          <el-table size="mini" :data="dataList" border v-loading="dataListLoading" @row-dblclick="rowDblclick"
            style="width: 100%; " :row-style="{height: '36px', padding: '0px', margin: '0'}"
            :cell-style="{padding: '0'}" :header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
            >
            <el-table-column type="index" header-align="center" align="center" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="productCode" header-align="center" align="center" width="100" sortable label="药品编号">
            </el-table-column>
            <el-table-column prop="barCode" header-align="center" align="center" sortable width="130" label="条形码">
            </el-table-column>
            <el-table-column prop="productName" header-align="center" align="center" sortable label="产品名称" width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="categoryName" header-align="center" align="center" sortable width="150" label="类别名称">
            </el-table-column>
            <el-table-column prop="genericName" header-align="center" align="center" label="通用名" width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="totalStorage" header-align="center" align="center" sortable width="100" label="总库存">
            </el-table-column>
            <el-table-column prop="standard" header-align="center" align="center" label="规格" width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="unit" header-align="center" align="center" sortable width="100" label="单位">
            </el-table-column>
            <el-table-column prop="purchasePrice" header-align="center" align="center" sortable width="120" label="最近采购价">
            </el-table-column>
            <el-table-column prop="retailPrice" header-align="center" align="center" sortable width="120" label="指导零售价">
            </el-table-column>
            <el-table-column prop="salePrice" header-align="center" align="center" sortable width="100" label="售价">
            </el-table-column>
            <el-table-column prop="approvalNo" header-align="center"  align="center" label="批准文号" width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="produceFactory" header-align="center"  align="center" label="厂家" width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="producingArea" header-align="center" align="center" label="产地"  width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dosageForm" header-align="center" align="center" label="剂型">
            </el-table-column>
            <el-table-column prop="isYiBao" header-align="center" align="center" sortable width="100" label="医保">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.isYiBao==1" type="success">是</el-tag>
                <el-tag v-else type="warning">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="isDrug" header-align="center" align="center" sortable width="100" label="中药">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.isDrug==1" type="success">是</el-tag>
                <el-tag v-else type="warning">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="isRxDrug" header-align="center" align="center" sortable width="100" label="处方药">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.isRxDrug==1" type="success">是</el-tag>
                <el-tag v-else type="warning">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text"  @click="saveHandle(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          selectField: '',
          selectValue: '',
          priceField: '',
          priceFormula: '',
          priceValue: '',
          queryField: '',
          key: '',
          unit: '',
          categoryId: null,
        },
        queryType: 1,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        filterText: '',
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        selectFields: [],
        priceFields: [],
        queryFields: [],
        priceFormulas: [],
        units: [],
        supplies: [],
        product: {},
        showInput: "",
        oldData: {},
        currentData: {}
      }
    },
    methods: {
      init(){
        this.initData()
        this.getDataList()
        this.getTreeData();
        this.getUnits();
        this.getSupplies();
        this.visible = true
      },
      initData() {
        let selectFields = [{
          value: 'is_rx_drug',
          label: '是否处方'
        }, {
          value: 'is_yi_bao',
          label: '是否医保'
        }, {
          value: 'is_drug',
          label: '是否中药'
        }, {
          value: 'is_split',
          label: '是否拆零药'
        }, {
          value: 'is_can_split',
          label: '能否拆零'
        }, {
          value: 'is_score',
          label: '是否积分'
        }, {
          value: 'is_discount',
          label: '是否折扣'
        }, {
          value: 'is_gift',
          label: '是否赠品'
        }, {
          value: 'is_commission',
          label: '是否提成'
        }, {
          value: 'is_first_sale',
          label: '是否首营'
        }];

        let priceFields = [{
          value: 'total_storage',
          label: '总库存'
        }, {
          value: 'profit',
          label: '毛利'
        }, {
          value: 'sale_price',
          label: '售价'
        }, {
          value: 'trade_price',
          label: '批发价'
        }, {
          value: 'retail_price',
          label: '指导零售价'
        }, {
          value: 'member_price',
          label: '会员价'
        }, {
          value: 'discount_price',
          label: '折扣价'
        }, {
          value: 'top_price',
          label: '最高价'
        }, {
          value: 'lowest_price',
          label: '最低价'
        }];

        let priceFormulas = [{
          value: 'GE',
          label: '大于等于'
        }, {
          value: 'EQ',
          label: '等于'
        }, {
          value: 'GT',
          label: '大于'
        }, {
          value: 'LE',
          label: '小于等于'
        }, {
          value: 'LT',
          label: '小于'
        }, {
          value: 'NE',
          label: '不等于'
        }, ]

        let queryFields = [{
          value: 'product_code',
          label: '编码'
        }, {
          value: 'bar_code',
          label: '条形码'
        }, {
          value: 'product_name',
          label: '产品名称'
        }, {
          value: 'generic_name',
          label: '通用名'
        }, {
          value: 'pinyin',
          label: '简拼'
        }, {
          value: 'producing_area',
          label: '产品区域'
        }, {
          value: 'produce_factory',
          label: '厂家'
        }, {
          value: 'dosage_form',
          label: '剂型'
        }, {
          value: 'standard',
          label: '规格'
        }, {
          value: 'effect',
          label: '效果'
        }, {
          value: 'approval_no',
          label: '批准文号'
        }, {
          value: 'brand_name',
          label: '品牌名称'
        }]

        this.selectFields = selectFields;
        this.priceFields = priceFields;
        this.priceFormulas = priceFormulas;
        this.queryFields = queryFields;
      },
      resetForm() {
        this.$nextTick(() => {
          this.dataForm = this.$options.data().dataForm
          this.getDataList()
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      async getUnits() {
        const res = await this.$http({
          url: '/base/basedict/getDict',
          method: 'get',
          params: this.$http.adornParams({
            'code': 'UNIT'
          })
        })
        let data = res.data
        if (data && data.code === 0) {
          this.units = data.data
        }
      },
      async getSupplies() {
        let store = JSON.parse(sessionStorage.getItem("store"));
        const {
          data
        } = await this.$http({
          url: '/product/supplier/getSupplies',
          method: 'get',
          params: this.$http.adornParams({
            'storeId': store ? store.storeId : null
          })
        })
        if (data && data.code === 0) {
          this.supplies = data.data
        }
      },
      async getTreeData() {
        const res = await this.$http({
          url: '/product/category/getTreeData',
          method: 'get',
        })
        let data = res.data
        if (data && data.code === 0) {
          this.treeData = data.data
        }
      },
      // 获取数据列表
      async getDataList() {
        this.dataListLoading = true
        const res = await this.$http({
          url: '/product/info/list',
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'dataForm': this.dataForm,
            'queryType': this.queryType
          })
        })
        let data = res.data
        if (data && data.code === 0) {
          this.totalPage = data.page.totalCount

          this.dataList = data.page.list;
          this.dataList.forEach(item => {
            item.status = item.status == 1 ? true : false
            item["edit"] = false;
          });

        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      },
      handleNodeClick(data) {
        this.dataForm.categoryId = data.id
        this.getDataList()
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      rowDblclick(row, column, event) {
        this.saveHandle(row)
      },
      saveHandle(row){
        this.visible = false;
        this.$nextTick(() => {
          this.dataForm = this.$options.data().dataForm
        })
        this.$parent.currentProduct = row
      }
    }
  }
</script>

<style lang="less" scoped>
  .filter-tree {
    background-color: white;
  }

  .el-col:nth-child(2) {
    padding-left: 20px;
  }

  .el-select {
    max-width: 100px;
  }

  .el-input {
    margin: 0px;
  }
</style>
